<template>
	<div class="app-container">
		<div>
      <p class="dialogTitle title">当前地震事件:
        <span v-if="currentEvent">{{ currentEvent.eventName }}</span>
        <span v-else>请在地震事件管理中设置当前地震事件</span>
      </p>
    </div>
    <el-row>
			<el-col :span="8">
				<div style="font-size: 16px;font-weight: bold;">
					需安置人数评估
				</div>
			</el-col>
		</el-row>	
		<el-row style="margin-top: 20px;margin-bottom: 10px;">			
			<el-col :span="10">
				<el-button type="primary" @click="handleQuery">评估</el-button>
			</el-col>
			<el-col :span="6">
				<el-link type="primary" :underline="false" @click="viewFormula">查看评估算法</el-link>
			</el-col>
		</el-row>
		<el-row>
			失去住所人数T，按式(1)计算：      T=（c+d+e/2）/a×b-f ....................(1)
		</el-row>
		<el-row style="margin-top: 10px;">
			<el-col :span="18">
				<table align="center" style="width: 100%;border-collapse: collapse;">
						<tr style="background: #D9D9D9;height: 35px;">
							<td align="center">公式中的计算指标</td>
							<td align="center" style="width: 200px;">计算值</td>
						</tr>
						<tr style="height: 30px;">
							<td align="center">a——为调查中得到的户均住宅建筑面积，单位为平方米</td>
							<td align="center">{{form.avalue}}</td>
						</tr>
						<tr style="height: 30px;">
							<td align="center">b——为调查中得到的户均人口，单位为人每户</td>
							<td align="center">{{form.bvalue}}</td>
						</tr>
						<tr style="height: 30px;">
							<td align="center">c——为住宅总建筑面积和房屋破坏比得到毁坏建筑面积，单位为平方米</td>
							<td align="center">{{form.cvalue}}</td>
						</tr>
						<tr style="height: 30px;">
							<td align="center">d——为住宅总建筑面积和房屋破坏比得到严重破坏建筑面积，单位为平方米</td>
							<td align="center">{{form.dvalue}}</td>
						</tr>
						<tr style="height: 30px;">
							<td align="center">e——为住宅总建筑面积和房屋破坏比得到中等破坏建筑面积，单位为平方米</td>
							<td align="center">{{form.evalue}}</td>
						</tr>
						<tr style="height: 30px;">
							<td align="center">f——为调查中得到的死亡人数，单位为人</td>
							<td align="center">{{form.fvalue}}</td>
						</tr>
				</table>
			</el-col>
		</el-row>
		<el-row style="margin-top: 20px;">
			<el-col :span="18">
				<el-table v-loading="loading" :data="dataList" >
					<el-table-column label="灾区" align="center" prop="disasterAreaName" />
					<el-table-column label="需安置人数" align="center" prop="resettlePeopleNumber" />					
				</el-table>
			</el-col>
		</el-row>
		
		<el-dialog title="评估算法" v-model="open" width="700px" append-to-body>
			<div style="font-size: 16px;">
				<p>失去住所人数T，按式(1)计算：</p>
		    <p>&nbsp;&nbsp;&nbsp;&nbsp;T=（c+d+e/2）/a×b-f ....................(1)</p>
				  <p>&nbsp;&nbsp;&nbsp;式中：</p>
			   <p>&nbsp;&nbsp;&nbsp;a——为调查中得到的户均住宅建筑面积，单位为平方米；</p>
			   <p>&nbsp;&nbsp;&nbsp;b——为调查中得到的户均人口，单位为人每户；</p>
			   <p>&nbsp;&nbsp;&nbsp;c——为住宅总建筑面积和房屋破坏比得到毁坏建筑面积，单位为平方米；</p>
			   <p>&nbsp;&nbsp;&nbsp;d——为住宅总建筑面积和房屋破坏比得到严重破坏建筑面积，单位为平方米；</p>
				<p>&nbsp;&nbsp;&nbsp;e——为住宅总建筑面积和房屋破坏比得到中等破坏建筑面积，单位为平方米；</p>
				<p>&nbsp;&nbsp;&nbsp;f——为调查中得到的死亡人数，单位为人。</p>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="open = false">关 闭</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="resettlePeople">
	import useEventStore from "@/store/modules/event";
	import { getAllList, getAllList1, getEvaluationSubArea, getResettlementPopulationEvaluation } from "@/api/directLossAssess/resettlePeople.js"
	const {
		proxy
	} = getCurrentInstance();
	const dataList = ref([]);
	const dataList1 = ref([]);
	const ids = ref();
	const radio = ref("1");
	const loading = ref(false);
	const loading1 = ref(false);
	const single = ref(true);
	const multiple = ref(true);
	const open = ref(false);
	const total = ref(0);
	const showSearch = ref(true);
	const currentEvent = computed(() => useEventStore().currentEvent);
	const option = ref([])
	const data = reactive({
		queryParams: {
//			page: 1,
//			rows: 10,
			xstmId: undefined,
			evaluationSubareaName: "",			
		},
		form: {}
	})
	const {
		queryParams,
		form
	} = toRefs(data)

	/** 搜索按钮操作 */
	function handleQuery() {
		//queryParams.value.page = 1;
//		if(!queryParams.value.xstmId){
//			proxy.$modal.msgWarning("请选择评估子区");
//			return
//		}
//		option.value.forEach(item => {
//    if (item.xstmId == queryParams.value.xstmId) {
//      queryParams.value.evaluationSubareaName = item.evaluationSubareaName;
//    }
//	})
		getList();
	}


	/** 重置按钮操作 */
	function resetQuery() {
		dataList.value = [];
		proxy.resetForm("queryRef");
		handleQuery();
	}

	/** 导出按钮操作 */
	function handleExport() {
		proxy.downloadTemplate('/samPoiData/exportExcel', {
			xsemId: currentEvent.value.id
		}, `抽样点数据.xls`)
	}

	// 编辑
	function handleEdit(row) {
		detail(row.id);
	}

	// 查看计算公式
	function viewFormula(id) {
		
		open.value = true;
			
	}
	
	function getEvaluationSubAreaList() {

		getEvaluationSubArea(currentEvent.value.id).then(response => {
			option.value = response.data
		});
		
	}
	function getDisasterAreasHousesDataList(){
		getResettlementPopulationEvaluation(currentEvent.value.id).then(response => {
			dataList.value = response.data ? response.data : [];
			form.value = response.data[0] ? response.data[0] : {};
		});
	}

	/** 查询数据列表 */
	function getList() {
			loading.value = true;
			getAllList({xsemId:currentEvent.value.id}).then(response => {
				dataList.value = response.data ? response.data : [];
				form.value = response.data[0] ? response.data[0] : {};
				// proxy.$modal.msgSuccess(response.message);
				//total.value = response.data.total;
				loading.value = false;
			});
		
	}
		/** 查询数据列表 */
	function getList1() {
			loading1.value = true;
			getAllList1({xsemId:currentEvent.value.id}).then(response => {
				dataList1.value = response.data ? response.data : [];
				//total.value = response.data.total;
				loading1.value = false;
			});
		
	}
	function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
	 if (columnIndex === 0) {
		 const _row = setTable(dataList.value).one[rowIndex];
		 const _col = _row > 0 ? 1 : 0;
		 return {
			 rowspan: _row,
			 colspan: _col
		 };
	 }
//	 if (columnIndex === 1 ) {
//		 const _row = setTable(getData.value).two[rowIndex];
//		 const _col = _row > 0 ? 1 : 0;
//		 return {
//		 rowspan: _row,
//			 colspan: _col
//			};
//		}
//	 if (columnIndex === 3 ) {
//		 const _row = setTable(getData.value).three[rowIndex];
//		 const _col = _row > 0 ? 1 : 0;
//		 return {
//		 rowspan: _row,
//			 colspan: _col
//			};
//		}
//	 if (columnIndex === 4 ) {
//		 const _row = setTable(getData.value).four[rowIndex];
//		 const _col = _row > 0 ? 1 : 0;
//		 return {
//		 rowspan: _row,
//			 colspan: _col
//			};
//		}
}
	function setTable(tableData) {
		 let spanOneArr = [],
		 spanTwoArr = [],
		 spanThreeArr = [],
		 spanFourArr = [],
		 concatOne = 0,
		 concatTwo = 0,
		 concatThree = 0,
		 concatFour = 0;
		 tableData.forEach((item, index) => {
			 if (index === 0) {
				 spanOneArr.push(1);
				 spanTwoArr.push(1);
				 spanThreeArr.push(1);
				 spanFourArr.push(1);
			 } else {
				 if (item.evaluationSubareaName === tableData[index - 1].evaluationSubareaName) {
				 //第一列需合并相同内容的判断条件
					 spanOneArr[concatOne] += 1;
					 spanOneArr.push(0);
				 } else {
					 spanOneArr.push(1);
					 concatOne = index;
				 }
				 
	//			 if (item.longitude === tableData[index - 1].longitude) {
	//			 //第二列和需合并相同内容的判断条件
	//				 spanTwoArr[concatTwo] += 1;
	//				 spanTwoArr.push(0);
	//			 } else {
	//				 spanTwoArr.push(1);
	//				 concatTwo = index;
	//			 }
	//			 
	//			 if (item.latitude === tableData[index - 1].latitude) {
	//			 //第三列和需合并相同内容的判断条件
	//				 spanThreeArr[concatThree] += 1;
	//				 spanThreeArr.push(0);
	//			 } else {
	//				 spanThreeArr.push(1);
	//				 concatThree = index;
	//			 }
	//			 
	//			 if (item.macroPosition === tableData[index - 1].macroPosition) {
	//			 //第三列和需合并相同内容的判断条件
	//				 spanFourArr[concatFour] += 1;
	//				 spanFourArr.push(0);
	//			 } else {
	//				 spanFourArr.push(1);
	//				 concatFour = index;
	//			 }
			 }
		 });
	 	return {
			 one: spanOneArr,
			 two: spanTwoArr,
			 three: spanThreeArr,
			 four: spanFourArr,
	 	};
	}
	onMounted(() => {
		setTimeout(() => {
			//getEvaluationSubAreaList();
			getDisasterAreasHousesDataList();
			//getList();
		}, 200)
	})
</script>

<style scoped lang="scss">
	.title {
		margin: 0 0 20px !important;
	}
	table td{
		border:1px solid #c6c6c6;
	}
</style>